<template>

    <div class="page-border">
        <div class="login-title">登录
        </div>
        <div class="sign-router" @click="router.push('/sign')">没有账号？去注册新账号
        </div>
        <div>
            <button :class="['check-title', { 'password': !way, 'captcha': way }]" @click="wayTrue"
                style="left: 130px;">密码登录</button>
            <div class="divider"></div>
            <button :class="['check-title', { 'password': way, 'captcha': !way }]" @click="wayFalse">验证码登录</button>
        </div>
        <div class="input-div">
            <div>
                <input class="input" v-model="mobile" placeholder="请输入手机号">
            </div>
            <div>
                <input class="input" v-if="way === true" v-model="password" placeholder="请输入密码">
                <input class="input" v-if="way === false" placeholder="请输入手机验证码">
            </div>
            <div style="display: grid;grid-template-columns: 1fr 1fr;">
                <input class="input" style="width: 100px;" placeholder="图形验证码">
                <img ref="captchaImage" :src="captchaImageUrl" class="check" @click="changeCaptcha">
            </div>
        </div>
        <div class="choose">
            <div class="check-box1" @click="toggleCheck1">
                <span v-if="showCheck1 === true">√</span>
                <span style="margin-left: 20px;font-size: small;">记住账号</span>
            </div>
            <div style="top: 240px;position: absolute;">
                <span style="font-size: small;left:210px;position: absolute;">忘记密码?>></span>
            </div>


            <div class="check-box2" @click="toggleCheck2">
                <span v-if="showCheck2 === true">√</span>
                <span style="margin-left: 20px;font-size: small;">我已阅读并同意服务条款和隐私政策</span>

            </div>
        </div>
        <div class="button" @click="Login">登录</div>
    </div>

</template>
<script setup>
import router from '@/router/index';
import { useData } from './login';
import { ref } from 'vue';
import {loginData} from './login';
const { showCheck1, toggleCheck1, way, showCheck2, toggleCheck2, wayFalse, wayTrue } = useData();
const {password,mobile,Login}=loginData();
const timestamp = ref(Date.now());
const captchaImageUrl = ref(`http://127.0.0.1:8888/code/image?timestamp=${timestamp.value}`);

const changeCaptcha = async () => {
  try {
    // 更新时间戳，使 URL 不同
    timestamp.value = Date.now();
    // 更新图片 URL
    captchaImageUrl.value = `http://127.0.0.1:8888/code/image?timestamp=${timestamp.value}`;
  } catch (error) {
    console.error('获取新的图片验证码出错：', error);
  }
};
</script>
<style>
@import './login.scss'
</style>